<template>
  <div class="blackIP-table">
    <affix label="IP地址"></affix>
    <div v-if="!IPadd">
      <div class="tool">
        <div class="add-wapper" style="float: left">
          <span @click.stop="addIPList" class="creat-text"><i class="el-icon-plus"></i><span>{{$t('public.add')}}</span></span>
          <span @click.stop="reshIPList" class="creat-text"><i class="iconfont icon-shuaxin"></i><span>{{$t('public.refresh')}}</span></span>
          <span @click.stop="delBlackList({}, 'batch')" class="creat-text" :class="isDisabled?'icon-disabled':''"><i class="iconfont icon-shanchu"></i><span>{{$t('webchat.moreDel')}}</span></span>
        </div>
        <div class="pag-wapper" style="float: right">
          <pagination
            :small="true"
            :currentPage="currPage"
            :count="IPCount"
            @turnPage="trunPages"
            :totalPage="Math.ceil(IPCount/10)">
          </pagination>
        </div>
      </div>
      <el-table :data="IPData" style="width: 100%" :highlight-current-row="true" :stripe="true" ref="multipleTable" @selection-change="handleSelectionChange" size="mini">
        <el-table-column
                type="selection"
                width="50">
        </el-table-column>
        <template v-for="item in IPTableHeader">
          <el-table-column
                  v-if="item.prop === 'IPList'"
                  :prop="item.prop"
                  :label="item.label">
            <template scope="scope">
              <div>
                {{scope.row.beginIp}}至{{scope.row.endIp}}
              </div>
            </template>
          </el-table-column>
          <el-table-column
                  v-if="item.prop !== '' && item.prop !== 'IPList'"
                  :prop="item.prop"
                  :label="item.label">
          </el-table-column>
          <el-table-column
                  v-if="item.prop === ''"
                  :label="item.label">
            <template scope="scope">
              <el-button type="text" @click="editBlackList(scope.row)" size="small" >{{$t('public.edit2')}}</el-button>
              <el-button type="text" @click="delBlackList(scope.row)" size="small" class="del">{{$t('public.delete')}}</el-button>
            </template>
          </el-table-column>
        </template>
      </el-table>
    </div>
    <div v-if="IPadd" class="clearfix addBox">
      <ipInput class="beginIp" :valueData="editIPData.beginIp" @input="ipStartUpdate"></ipInput>
      <div class="separate">——</div>
      <ipInput class="endIp" :valueData="editIPData.endIp" @input="ipEndUpdate"></ipInput>
      <span slot="footer" class="dialog-footer">
        <el-button class="primary_btn " @click="cancelUpdate">{{$t('webchat.cancel')}}</el-button>
        <el-button class="primary_btn " type="primary" @click="saveUpdateIP">{{$t('webchat.determine')}}</el-button>
      </span>
    </div>
  </div>
</template>
<script>
  import affix from '@/components/ui-modules/affix/Affix.vue'
  import Pagination from '@/components/public-modules/card/Pagination'
  import ipInput from '@/components/public-modules/IP/index.vue'
  import {deepClone, getCache, getFormatDateTime, resetForm} from '@/utils/m7Utils'
  export default {
    name: 'blackIPTable',
    data () {
      return {
        IPData: [],
        flag: this.$store.getters.isEcommerce ? 'ecommerce' : 'kf',
        IPTableHeader: [
          {prop: 'IPList', label: 'IP列表'},
          {prop: 'createTime', label: '创建时间'},
          {prop: 'updateTime', label: '更新时间'},
          {prop: '', label: this.$t('public.operate')}
        ],
        IPadd: false,
        editIPData: {
          beginIp: '',
          endIp: ''
        },
        currPage: 1,
        IPCount: 0,
        custName: '', // 访客名称
        multipleSelectionIp: [],
        isDisabled: true //
      }
    },
    methods: {
      editBlackList (data) {
        this.editIPData = deepClone(data)
        this.IPadd = true
      },
      ipStartUpdate (data) {
        this.editIPData.beginIp = data
      },
      ipEndUpdate (data) {
        this.editIPData.endIp = data
      },
      addIPList () {  // 添加IP地址段
        this.editIPData = {beginIp: '', endIp: ''}
        this.IPadd = true
      },
      cancelUpdate () {
        this.IPadd = false
        this.editIPData = {beginIp: '', endIp: ''}
      },
      changIp (str) {
        var strNew = ''
        for (var i=0;i<4;i++) {
          strNew += parseInt(str.substr(i*3, 3)) + '.'
        }
        strNew = strNew.slice(0, strNew.length - 1)
        return strNew
      },
      saveUpdateIP () {
        var form = deepClone(this.editIPData)
        if (form.beginIp > form.endIp) {
          this.$message.error('请检查您的IP地址段')
          return
        }
        form.beginIp = this.changIp(form.beginIp)
        form.endIp = this.changIp(form.endIp)
        this.IPadd = false
        var action = 'addBlackIpRange'
        if (form._id) {
          action = 'editBlackIpRange'
        }
        this.$store.dispatch(action, form).then((resp) => {
          if (resp && resp.success) {
            this.$message.success('保存成功')
            this.IPadd = false
            this.reshIPList()
            this.editIPData = {beginIp: '', endIp: ''}
          } else {
            this.$message.error('保存失败')
          }
        })
      },
      trunPages (val) { // 翻页
        this.currPage = val
        this.getBlackList()
      },
      reshIPList () { // 刷新 or 点击查询 IP列表
        this.currPage = 1
        this.getBlackList()
      },
      handleSelectionChange (val) {
        let idArr = []
        if (val.length > 0) {
          this.isDisabled = false
          val.forEach(item => {
            idArr.push(item._id)
          })
        } else {
          this.isDisabled = true
        }
        this.multipleSelectionIp = idArr
      },
      getBlackList (currPage) {
        var page = currPage || this.currPage
        var form = {
          "page": page,
          "limit":10
        }
        this.$store.dispatch('queryBlackIpRangeList', form).then((resp) => {
          if (resp && resp.success) {
            this.IPData = resp.list
            this.IPCount = resp.count
          }
        })
      },
      delBlackList (obj, type) {
        let data = {idList: []}
        if (type) {
          data.idList = this.multipleSelectionIp
        } else {
          data.idList.push(obj._id)
        }
        this.$store.dispatch('deleteBlackIpRangeList', data).then((resp) => {
          if (resp && resp.success) {
            this.$message.success(this.$t('configLazyLoad.public.deleteSuccess'))
            this.getBlackList(1)
          } else {
            this.$message.error(this.$t('configLazyLoad.public.deleteFailure'))
          }
        })
      },
      delBlackListWarn (obj, flag) {
        let str = ''
        if (flag === 'single') {
          let custName = obj.sName || ''
          str = this.$t('configLazyLoad.blackList.deletCustNameFromBlackList', {custName: custName})
        } else {
          str = this.$t('configLazyLoad.blackList.confirmBatchUnlockAndDelete')
        }
        this.$confirm(str, this.$t('public.tip'), {
          confirmButtonText: this.$t('public.confirm'),
          cancelButtonText: this.$t('public.cancel'),
          cancelButtonClass: 'primary_btn',
          confirmButtonClass: 'primary_btn',
          type: 'warning'
        }).then(() => {
          this.delBlackList(obj, flag)
        }).catch(() => {
          console.log(this.$t('public.cancel'))
        })
      },
    },
    beforeMount () {
      this.getBlackList()
    },
    components: {
      affix,
      Pagination,
      ipInput
    }
  }
</script>
<style lang="stylus" scoped>
  @import "../../../../../assets/common.styl"
  .blackIP-table
    .ui-affix
      padding-bottom 0
    .form-wrap
      margin-bottom 40px
    .submit
      float right
    .padd-r-10
      padding-right 10px
    .bet
      &:before
        content: ''
        display inline-block
        width 15px
        height 1px
        margin 3px 12px
        background $cf-gray5
        text-align center
    .wapper
      display flex
      flex-direction column
    .tool
      border 1px solid #e7e7eb
      border-bottom 0
      padding  8px 0px
      height 30px
      justify-content space-between
    .add-wapper
      line-height 30px
      cursor pointer
      span
        margin-left 5px
    .creat-text
      cursor pointer
      .iconfont,.el-icon-plus
        color $c-main
        font-size 12px
    .del
      color $c-pink
    .icon-disabled
      cursor not-allowed
      .iconfont
        color #9D9B9D
        font-size 12px
  .beginIp,.endIp
    margin-right 20px
  .separate
    float left
    line-height 22px
    margin-right 20px
  /* .addBox */
    
</style>